var table = layui.table,
	layer = layui.layer,
	form = layui.form;
	
var updateConfId = '';
var isUpdate = false;

//表格的viewer对象
var destroyViewer = false;
var tableImageViewer;

//添加、修改表单的viwer对象
var desctroyFormViewer = false;
var formViewer;
	
$(function(){
	loadTable();
})

$('#queryInfo').click(function(){
	loadTable();
})

form.on('select(conf_type_prop)',function(data){
	console.log('监听到下拉框变化')
	if('1'==data.value){
		$('#conf_value_prop').show();
		$('#upload-div').hide();
	} else if ('2'==data.value){
		$('#upload-div').show();
		$('#conf_value_prop').hide();
	}
})

//预览选择的图片
function chooseImage(domElem){
	console.log('用户选择了一张本地图片')
	if(desctroyFormViewer){
		formViewer.destroy();
	}
	let reads = new FileReader();
	let f = $(domElem).get(0).files[0];
	reads.readAsDataURL(f);
	reads.onload = function(e){
		$('#img-show').attr('src',this.result);
		formViewer = new Viewer(document.getElementById('img-show'));
		desctroyFormViewer = true;
	}
}
	
var loadTable = function(){
	table.render({
		id : 'configsTable'
		, elem: '#configsTable'
		, height: 'full-150'
		, url: access_url+'/systemconfig/querysysconfigforpage' //数据接口
		, method:'post'
		, contentType : 'application/json'
		,where: {//设定异步数据接口的额外参数
			params : {
				conf_key : $('#conf_key').val()
				,conf_value : $('#conf_value').val()
				,remark : $('#remark').val()
				,conf_type : $('#conf_type').val()
			}
		}
		,request: {
			pageName: 'pageNum' //页码的参数名称，默认：page
			,limitName: 'pageSize' //每页数据量的参数名，默认：limit
		}
		,response: {
			statusCode: 200 //成功的状态码，默认：0
	    }
		, page: {//开启分页
			layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'] //自定义分页布局
			,groups: 4 //只显示 4 个连续页码
			, prev:"上一页"
			, next:"下一页"
		}
		, limit: 10 //每页默认显示的数量
		, cols: [[ //表头
			{field: 'id', title: '序号',unresize:true,type:'numbers',width:50},
			{
				field: 'conf_key',
				title: '属性键值',
				align: 'center'
			},
	        {
	            field: 'conf_value',
	            title: '属性值',
	            align: 'center',
				templet: function(d){
	            	if('2' == d.conf_type){
						let fileUrl = d.conf_value;
						let saveType = d.img_save_type;
						let readFileUrl = getReadFileUrl(fileUrl,saveType);
						let badImgPath = '../../image/bad-img.png';
	            		return `<img alt="" src="${readFileUrl}" width="30px" height="30px" onerror="this.src='${badImgPath}';this.onerror=null"/>`;
	            	}
	            	return d.conf_value;
	            }
	        },
	        {
	            field: 'remark',
	            title: '备注',
	            align: 'center'
	        },
	        {
	            field: 'conf_type',
	            title: '属性类型',
	            align: 'center',
				width: 100,
				templet: function(d){
                	if('1' == d.conf_type){
                		return '文本';
                	} else if ('2' == d.conf_type) {
						return '图片'
					} else {
						return '未知'
					}
                }
	        },
	        {
	        	field: 'update_time',
	        	title: '修改时间',
	        	align: 'center',
				width: 170
	        },
	        {
	        	field: 'create_time',
	        	title: '创建时间',
	        	align: 'center',
				width: 170
	        },
			{field: '', title: '操作',unresize:true,align: 'center',	width: 150,toolbar: '#operate'}
		]]
		,parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
	        console.log("parseData->res",res);
	        return {
	          "code": res.code, //解析接口状态
	          "msg": res.msg, //解析提示文本
	          "count": res.retdata.total, //解析数据长度
	          "data": res.retdata.pageData //解析数据列表
	        };
	    }
		,done : function(res,curr,count){
			if(res.code!=200){
				layer.msg(res.msg,{icon: 5});
			}
			if(destroyViewer){
				tableImageViewer.destroy();
			}
			tableImageViewer = new Viewer(document.getElementById('config-table-div'));
			destroyViewer = true;
		}
	});
}

//修改和删除的操作
table.on('tool(dataTable)',function(obj){
	var data = obj.data;
	var layEvent = obj.event;
	var key_id = data.key_id;
	if('del'==layEvent){
		layer.confirm('属性删除后不可恢复!确定删除此属性?',{icon:3,title:'提示'},function(index){
			layer.load(2);
			$.ajax({
				type : 'post'
			    ,dataType : 'json'
			    ,url : access_url+'/systemconfig/deletesysconfigs'
			    ,data : {
			    	configIds : key_id
			    }
				,success : function(data){
					layer.closeAll('loading');
					if(data.code != 200){
						layer.msg(data.msg, {icon: 5});
						return;
					}
					layer.alert(data.msg,{icon:6});
					loadTable();
				}
			})
		})
	} else if ('update'==layEvent){
		isUpdate = true;
		updateConfId = key_id;
		
		let conf_key = data.conf_key;
		let conf_value = data.conf_value;
		let conf_type = data.conf_type;
		let remark = data.remark;
		
		form.val('conf-form',{
			'conf_key_prop':conf_key
			,'conf_value_prop':conf_value
			,'conf_type_prop':conf_type
			,'remark_prop':remark
		})
		
		if('1'==conf_type) {
			$('#conf_value_prop').show();
			$('#upload-div').hide();
		} else if ('2'==conf_type) {
			$('#upload-div').show();
			$('#conf_value_prop').hide();
			$('#img-show').attr('src',conf_value);
			if(desctroyFormViewer){
				formViewer.destroy();
			}
			formViewer = new Viewer(document.getElementById('img-show'));
			desctroyFormViewer = true;
		}
		
		layer.open({
			type : 1
			,title : '修改系统常用属性'
			,area : ['700px','550px']
			,offset : '20px'
			,fixed : false
			,content : $('#configPropForm')
			,resize : false
			,zIndex : 2000
		})
		
	}
})

$('#add-config').click(function(){
	//将修改的键值置为空
	updateConfId = '';
	
	//清空form标签已填内容
	$('.layui-btn-primary').click();
	
	//清空file的域
	let selectFile = $('#upload-img-btn');
	selectFile.after(selectFile.clone().val(""));
	selectFile.remove();
	$('#img-show').attr('src','../../image/system/image.png')
	
	//恢复最初的样式
	$('#conf_value_prop').show();
	$('#upload-div').hide();
	
	//将修改标签置为false
	isUpdate = false;
	
	layer.open({
		type : 1
		,title : '添加系统常用属性'
		,area : ['700px','550px']
		,offset : '20px'
		,fixed : false
		,content : $('#configPropForm')
		,resize : false
		,zIndex : 2000
	})
})

$('#saveRole').click(function(){
	console.log('保存系统常用参数')
	
	var layuiForm = form.val('conf-form');
	
	let conf_key = layuiForm.conf_key_prop;
	let conf_value = layuiForm.conf_value_prop;
	let conf_type = layuiForm.conf_type_prop;
	let fileList = $('#upload-img-btn').get(0);
	let remark = layuiForm.remark_prop;
	
	if(isNull(conf_key)){
		layer.msg('属性键值不允许为空!', {icon: 5});
		return;
	}
	
	if(isNull(conf_type)){
		layer.msg('属性类型不允许为空!', {icon: 5});
		return;
	}
	
	if('1'==conf_type&&isNull(conf_value)){
		layer.msg('当属性类型为文本时属性值不允许为空!', {icon: 5});
		return;
	}
	
	if('2'==conf_type&&fileList.length==0){
		layer.msg('当属性类型为图片时上传图片不允许为空!', {icon: 5});
		return;
	}
	
	let formData = new FormData();
	
	formData.append("conf_key",conf_key);
	formData.append("conf_value",conf_value);
	formData.append("remark",remark);
	formData.append("conf_type",conf_type);
	if('2'==conf_type){
		formData.append("file",fileList.files[0]);
	}
	
	console.log("formData",formData);
	
	layer.load(2);
	
	let reqUrl = access_url+'/systemconfig/addsysconfig';
	
	//点击修改时调用的变化
	if(isUpdate){
		formData.append("key_id",updateConfId)
		reqUrl = access_url+'/systemconfig/updatesysconfig';
	} 
	
	$.ajax({
		type : 'post'
		,contentType : false
		,async : false
		,url : reqUrl
		,data : formData
		,processData: false
		,success : function(data){
			layer.closeAll('loading');
			if(data.code != 200){
				layer.msg(data.msg, {icon: 5});
				return;
			}
			layer.alert(data.msg,{icon:6});
			loadTable();
			layer.closeAll('page');
		}
	})
})